<template>
	<view class="container">
		<view>
			<view class="tabs">
				<view v-for="(tab,index) in xyList" :key="index" class="tab">
					<text @click="()=>clickItem(index)" :class="index === current?'active':''">
						{{tab.tit}}
					</text>
				</view>
			</view>

			<swiper  class="swiper" :current="current" :circular='true' @change="changeItem">
				<swiper-item  v-for="(item, index) in xyList" :key="index">

					<view class="item" style="width: 100%;height: 100%;">

						<web-view :fullscreen='false' style=" width: 90vw; margin-left: 5vw; height: 100%;" :src="item.url" :frameBorder="0"></web-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			xyList: {
				type: Array,
				default: []
			},
			active: {
				type: Number,
				default: 0
			},
		},
		watch: {
			active: {
				handler(newVal, oldVal) {
					this.current = newVal

				},
				immediate: true,
				deep: true // 可以深度检测到 person 对象的属性值的变化
			}


		},

		data() {
			return {

				current: 0 //当前页签
			}
		},
		onLoad() {

		},
		methods: {
			//点击tab切换页签
			clickItem(idx) {
				this.current = idx;
			},
			//左右滑动切换页签
			changeItem(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.tabs {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		height: 100rpx;
		overflow: hidden;

		.tab {
			display: inline-flex;
			box-sizing: border-box;
			position: relative;
			flex: 1;
			justify-content: center;
			align-items: center;

			.active {
				color: $mian-color;
				font-weight: bold;
			}
		}
	}

	.swiper {
		min-height: 600px;
	}

	.item {
		// margin-left: 10rpx;
		
		// padding: 10rpx;
		border-radius: 5rpx;

		min-height: 400rpx;
	}
</style>